<template>
    <div id="contain" class="content-inner">
        <!-- 内容区头部 -->
        <header class="pageme-header">
            <!-- 面包屑 -->
            <Breadcrumb>
                <BreadcrumbItem to="/admin/home">主页</BreadcrumbItem>
                <BreadcrumbItem>转账管理</BreadcrumbItem>
            </Breadcrumb>
        </header>
        <div class="content-main">
            <!-- 内容区域显示部分 -->
            <div class="contain-main-show">
                <el-table :data="transferList" stripe style="width: 100%">
                    <el-table-column prop="tId" label="转账ID" min-width="60" align="center"/>
                    <el-table-column prop="tOid" label="订单ID" min-width="60" align="center"/>
                    <el-table-column prop="tOno" label="订单编号" min-width="120" align="center"/>
                    <el-table-column prop="tAlipay" label="支付宝号" min-width="120" align="center"/>
                    <el-table-column label="服务费" min-width="100" align="center">
                        <template v-slot="{ row }">
                            ¥{{ row.tServicePrice }}
                        </template>
                    </el-table-column>
                    <el-table-column label="转账金额" min-width="100" align="center">
                        <template v-slot="{ row }">
                            ¥{{ row.tPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="oCreateTime" label="创建时间" min-width="160" align="center">
                        <template v-slot="{ row }">
                            {{ moment(row.tCreateTime).subtract(8,"hours").format("YYYY-MM-DD HH:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="tDesc" label="退款说明" min-width="170" align="center"/>
                </el-table>
                <div class="page-all">
                    <Page :total="allPages.total" :page-size="pageSize"
                    :current="pageNum" @on-change="changePage"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'transfer',
  data () {
    return {
      pageSize: 6, // 每页显示多少条
      allPages: [], // 存放分页2的信息
      pageNum: 1, // 默认展示第一页数据
      transferList: [] // 转账列表
    }
  },
  created () {
    this.findAll()
  },
  methods: {
    moment,
    // 查找所有转账列表
    findAll () {
      this.$axios({
        url: 'transfer/findAll',
        method: 'get',
        params: {
          pageNo: this.pageNum,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('adminToken')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.transferList = res.data.pageInfo.list
          this.allPages = res.data.pageInfo
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页改变页码
    changePage (index) {
      // 加载更多，页码改变的回调，返回改变后的页码
      this.pageNum = index
      this.findAll()
    }
  }
}
</script>

<style scoped>

.page-all{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
/* 主要内容区域 */
.content-inner{
    width: 100%;
    height: calc(100% - 60px);
    min-height: 495px;
}
/* 内容区头部 */
header.pageme-header{
    width: 100%;
    height: 50px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    line-height: 50px;
    padding-left: 20px;
}
/* 内容区域 */
.content-main{
    width: 100%;
    height:auto;
    padding: 15px;
}
/* 内容区域显示部分 */
.contain-main-show{
    width: 100%;
    height: auto;
    margin-top: 28px;
}
</style>
